<template>
	<view>
		<u-navbar title="群成员"></u-navbar>
		<u-sticky>
			<view class="bg-white u-p-x-30 u-p-y-14 solid-bottom">
				<u-search v-model="key" placeholder="搜索好友名称" :show-action="false"></u-search>
			</view>
		</u-sticky>
		<view class="u-flex u-p-x-30 u-p-y-20 bg-white u-border-bottom"
			v-for="(member,index) in members.list" 
			:key="index"
		>
			<u-avatar :src="member.user&&(member.user.saveAvatar||member.user.avatarUrl)||member.avatar" mode="square"></u-avatar>
			<text class="u-flex-1 u-m-l-20 u-font-34">{{(member.user&&(member.user.remarks||member.user.userName))||member.remarks||member.userName}}</text>
			<text v-if="member.vest">{{member.vest}}</text>
		</view>
	</view>
</template>

<script>
	import { fetchGroupMember } from "@/api/addr.js";
	import DC from "@/DC/index.js"
	import { Member } from "@/entity/Member.js"
	
	export default {
		data() {
			return {
				id:'',
				key:'',
				members:{
					list:[],
					pageNo:1,
					pageSize:20,
					nomore:false,
					loading:false
				}
			};
		},
		watch:{
			key(){
				this.$u.debounce(this.resetMember,500)
			}
		},
		onLoad({id}) {
			this.id = id
			this.resetMember()
		},
		onReachBottom() {
			this.moreMember()
		},
		methods:{
			async resetMember(){
				this.members.list = []
				this.members.pageNo = 1
				this.members.nomore = false
				await this.moreMember()
			},
			async moreMember(){
				if(this.members.loading){
					throw new Error('正在请求中')
				}
				try{
					this.members.loading = true
					if(this.members.nomore){
						return []
					}
					const list = await fetchGroupMember({id:this.id,name:this.key,pageNo:this.members.pageNo,pageSize:this.members.pageSize})
					if(!list||list.length<this.members.pageSize){
						this.members.nomore = true
					}else {
						this.members.pageNo++
					}
					const members = list.map((item)=>{
						const member = Member.origin2Ins(item)
						member.user = DC.userDB.getUser(member.userId)
						return member
					})
					this.members.list.push(...members)
					return members
				}finally{
					this.members.loading = false
				}
			}
		}
	}
</script>

<style lang="scss">

</style>
